<template>
  <el-menu
    :uniqueOpened="true"
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    :router="true"
    background-color="#0F111D"
    text-color="#999"
    active-text-color="#fff"
  >
    <el-menu-item
      :index="item.path"
      v-for="item in $router.options.routes.filter(
        (item) => item.name === '首页'
      )"
      :key="item.name"
    >
      <i class="el-icon-location"></i>
      <span>首页</span>
    </el-menu-item>
    <el-submenu :index="i.toString()" v-for="(father, i) in nav" :key="i">
      <template #title>
        <i class="el-icon-location"></i>
        <span>{{ father.name }}</span>
      </template>
      <el-menu-item
        :index="item.path"
        v-for="item in $router.options.routes.filter(
          (item) =>
            item.meta &&
            item.meta.isNav === true &&
            item.meta.father === father.name
        )"
        :key="item.name"
        >选项1</el-menu-item
      >
    </el-submenu>
  </el-menu>
</template>

<script>
import Nav from "@/config/menuConfig";
export default {
  name: "Menu",
  data() {
    return {
      nav: Nav,
    };
  },
  methods: {},
};
</script>

<style>
.el-menu-vertical-demo {
  width: 230px;
  height: calc(100vh - 100px);
}
</style>
